<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
	<title>
		抽奖
	</title>
	<link rel="stylesheet" type="text/css" href="css/lottery.css">
</head>
<body>
	<div class="container">
		<ul>
			<li>iPhone6 Plus</li>
			<li>小米note</li>
			<li>魅蓝note2</li>
			<li>华为荣耀4X</li>
			<li>二手诺基亚</li>
		</ul>
	</div>
	<div class="triangle"></div>
	<div class="button">
		<button id="random">随机</button>
		<button id="first">一等</button>
		<button id="second">二等</button>
		<button id="third">三等</button>
	</div>

	<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
	<script type="text/javascript">


		function animate(num,time){

			var order = "1";

			if (num > 4) {
					order = Math.ceil((num+1)/5) + "";
					num = num%5;
			};
			console.log("num:"+ num + "order:"+order);

			$("ul").animate({top:"-57px"},time,"linear",function(){
				$("ul li").eq(num).css({
					"-webkit-box-ordinal-group":order,
					"-moz-box-ordinal-group":order,
					"box-ordinal-group":order,
					"-ms-flex-order":order,
					"-webkit-order":order,
					"order":order
				});
				$(this).css("top","0px");
			});

		}

		function selectNum(times){

			$("li").each(function(){
			    $(this).css({
					"-webkit-box-ordinal-group":"0",
					"-moz-box-ordinal-group":"0",
					"box-ordinal-group":"0",
					"-ms-flex-order":"0",
					"-webkit-order":"0",
					"order":"0"
				});
			});
			for (var i = 0; i < times; i++) {
				if (i < 2) {
					animate(i,250);
				}
				else if( i > (times - 2)){
					animate(i,300);
				}else{
					animate(i,150);
				}
			}

	}
		
		$("#random").click(function(){
			var times = 40 + Math.floor(Math.random()*5);
			selectNum(times);

		})

		$("#first").click(function(){
			var times = 40 + 4;
			selectNum(times);

		})

		$("#second").click(function(){
			var times = 40 + 5;
			selectNum(times);

		})

		$("#third").click(function(){
			var times = 40 + 3;
			selectNum(times);

		})
	</script>
</body>
</html>